<template>
  <div class="salesOrder">
    <div class="screen">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="商品名称">
          <el-input v-model="formInline.goodsname"></el-input>
        </el-form-item>
        <el-form-item label="汇总时间">
          <el-date-picker
            v-model="formInline.sumDate"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="订单日期">
          <el-date-picker
            v-model="formInline.sumOrderDate"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="订单类型">
          <el-select v-model="formInline.sumOrderDate" placeholder="请选择">
            <el-option
              v-for="item in orderType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品类别">
          <el-select v-model="formInline.Commodity" placeholder="请选择">
            <el-option
              v-for="item in categories"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- tab切换 -->
    <div class="tabSwitch">
      <el-radio-group v-model="radio1">
        <el-radio-button label="全部"></el-radio-button>
        <el-radio-button label="待付款"></el-radio-button>
        <el-radio-button label="待采购"></el-radio-button>
        <el-radio-button label="待分拣"></el-radio-button>
        <el-radio-button label="已分拣"></el-radio-button>
        <el-radio-button label="备货中"></el-radio-button>
        <el-radio-button label="已配送"></el-radio-button>
        <el-radio-button label="已验收"></el-radio-button>
      </el-radio-group>
      <div class="elButton">
        <el-button type="primary" @click="dialogFormVisible = true">生成采购单</el-button>
        <el-button type="primary" @click="handlePrint">打印</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <div ref="print" class="orderList">
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="80"></el-table-column>
        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <el-table-column prop="sumOrderDate" label="订单日期" width="auto"></el-table-column>
        <el-table-column prop="goodsname" label="商品名称" width="auto"></el-table-column>
         <el-table-column prop="cateName" label="商品类别" width="auto"></el-table-column>
        <el-table-column prop="sumQuantity" label="总数量" width="auto"></el-table-column>
        <el-table-column prop="sumWeight" label="总重量" width="atuo"></el-table-column>
        <el-table-column prop label="辅助单位" width="auto"></el-table-column>
        <!-- <el-table-column prop label="辅助数量" width="atuo"></el-table-column> -->
        <el-table-column prop="price" label="单价(元,kg)" width="auto"></el-table-column>
        <el-table-column prop="sumMoney" label="总金额" width="auto"></el-table-column>
        <el-table-column prop="sumDate" label="汇总日期" width="auto"></el-table-column>
        <el-table-column prop label="订单状态" width="auto"></el-table-column>
      </el-table>
    </div>
    <div class="paging">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      ></el-pagination>
      <!-- 遮罩层 -->
      <el-dialog title="填写资料" :visible.sync="dialogFormVisible" width="40%">
        <el-form :model="from">
          <el-form-item label="收货地址" :label-width="formLabelWidth" style="width:400px;">
            <el-input v-model="from.address" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="选择日期" :label-width="formLabelWidth">
            <el-date-picker
              v-model="from.eliveryTime"
              type="datetime"
              placeholder="选择日期"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="选择供应商" :label-width="formLabelWidth">
            <el-select v-model="from.supplierId" placeholder="请选择">
              <el-option
                v-for="item in supplierSelection"
                :key="item.value"
                :label="item.supplierNameShort"
                :value="item.supplierId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="determine">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// 导入的其他文件 例如：import moduleName from 'modulePath';
import {
  lionfishSum,
  supplierList,
  generate,
  goodsCategory
} from "@/api/orderList.js";
export default {
  //import所引入的组件注册
  components: {},

  data() {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      tableData: [],
      categories: [],
      selectedIDs: [],
      selected: [],
      orderType: [],
      supplierSelection: [],
      Selection: "",
      total: 1,
      multipleSelection: [],
      radio1: "全部",
      formInline: {
        goodsname: "",
        sumDate: "",
        sumOrderDate: "",
      },
      from: {
        address: "番禺分拣中心",
        supplierId: "",
        eliveryTime: ""
      },
      formLabelWidth: "100px"
    };
  },

  //监听属性
  computed: {},

  //监控data中的数据变化
  watch: {},

  //方法集合
  methods: {
    init() {
      let data = {};
      supplierList(data).then(res => {
        console.log(res);
        this.supplierSelection = res.rows;
      });
    },
    handleCurrentChange(val) {
      console.log(val);
      this.formInline.pageNo = val;
      this.orderList();
    },
    handlePrint() {
      this.$print(this.$refs.print);
    },
    determine() {
      console.log(this.selected);
      let data = {
        ...this.from,
        ids: this.selectedIDs
      };
      generate(data).then(res => {
        console.log(res);
        if (this.selectedIDs == "") {
          this.$message({ type: "warning", message: "请勾选选择商品" });
          return false;
        } else if (res.code == 20000) {
          this.dialogFormVisible = false;
          this.$message({ type: "success", message: res.msg });
          this.orderList();
        } else {
          this.$message({ type: "warning", message: res.msg });
        }
      });
    },
    Category() {
      goodsCategory().then(res => {
        const list = res.rows.map(item => {
          return { value: item.id, label: item.name };
        });
        this.categories = list;
      });
    },
    //列表
    orderList() {
      let data={
        cateId:this.formInline.Commodity,
        goodsname:this.formInline.goodsname,
        sumDate:this.formInline.sumDate,
        sumOrderDate:this.formInline.sumOrderDate
      }
      lionfishSum(data).then(res => {
        console.log(res);
        if (res.code == 20000) {
          this.tableData = res.rows;
          this.total = res.total;
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      let ids = [];
      this.multipleSelection.map(item => {
        ids.push(item.id);
      });
      this.selectedIDs = ids;
    },
    handleSearch() {
      this.orderList();
    }
  },

  //创建完成 访问当前this实例
  created() {
    this.orderList();
    this.init();
    this.Category();
  },
  //挂载之前
  beforeMount() {},
  //挂载完成 访问DOM元素
  mounted() {}
};
</script>
<style lang='scss'>
.salesOrder {
  .screen {
    padding: 20px;
    font-family: "宋体";
    border-bottom: 20px solid #f4f4f5;
    .el-form-item__label {
      color: #606266;
      font-size: 14px;
      width: 100px;
    }
  }
  .tabSwitch {
    padding: 20px;
    display: flex;
    justify-content: space-between;
  }
  .elButton {
    padding: 0 20px;
  }
  .orderList {
    padding: 20px;
  }
  .paging {
    text-align: center;
  }
}
</style>